<template>
	<view class="page-content">
		<view class="content-box">
			<view style="margin-bottom: 8px;">
				账户金额（元）
			</view>
			<view class="flex-start" style="align-items: baseline;">
				<text style="font-size: 18px;">￥</text><text style="font-size: 28px;">18860.00</text>
			</view>
		</view>
		<view class="white-box">
			<view style="font-weight: 600;margin-bottom: 30px;">
				充值金额
			</view>
			<view style="margin-bottom: 25px;align-items: center;border-bottom: 1px solid #f0f0f0;padding-bottom: 5px;" class="flex-between">	
				<image src="../../../static/wallet/money.png" mode=""  style="width: 36px;height: 53px;margin-right: 15px;"/>
				<input class="moneyInput">
				</input>
				<text style="font-size: 14px;color:#E61010;margin-left: 15px;">充值记录</text>
			</view>
			<view style="margin-bottom: 20px;align-items: center;border-bottom: 1px solid #f0f0f0;padding-bottom: 15px;" class="flex-between">

				<text style="font-size: 16px;color:#000;margin-right: 15px;">充值方式</text>
				<input class="moneyInput">
				</input>
				<text style="font-size: 14px;color:#000;margin-left: 15px;">微信支付 ></text>
				
				
			</view>
		<!-- 	<view style="font-size: 13px;color: #999;">
				提现手续费5.5‰，最低0.01元
			</view> -->
			<view class="m-x-15">
				<button type="warn" block @click="onSubmit"
					style="background: #d43030;border-radius: 25px;">确认</button>
			</view>
		</view>

		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message type="success" message="充值成功" :duration="2000"></uni-popup-message>
			</uni-popup>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			onSubmit() {
				uni.showToast({
					title: '充值成功',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'success',
					//显示持续时间为 2秒
					duration: 2000
				})
				// this.$refs.message.open()
			},
		}


	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100vh;
		background: #fff;
		position: relative;
	}

	.content-box {

		background: linear-gradient(134.56deg, rgba(230, 16, 16, 1) 0%, rgba(212, 48, 48, 0.53) 48.51%, rgba(230, 16, 16, 1) 100%);

		padding: 50px 15px;

		color: #fff;
		font-size: 14px;
		box-sizing: border-box;
		width: 100%;
	}

	.white-box {
		padding: 40px 20px;
		width: calc(100% - 30px);
		box-sizing: border-box;
		margin: 0 15px;
		position: absolute;
		top: 135px;
		background: #fff;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
		border-radius: 5px;
	}


	.m-x-15 {
		text-align: center;
		margin: 30px 8%;
	}

	.moneyInput {
		--td-font-size-m: 30px;
		flex: 1;
	}

	.bankInput {
		--td-font-size-m: 16px;
		font-weight: 600;
		
	}
</style>